@use "sass:math";

/// Mixin helper to push header from medium sidebar size
@mixin header-pushed-md {
    &.pushed {
        @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
    }
    @media #{$xsmall-and-up} {
        .header-title {
            &.pushed {
                @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
            }
        }
        .header-right-picture {
            &.pushed {
                @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
            }
        }
    }
}

/// Mixin helper to push header from large sidebar size
@mixin header-pushed-lg {
    &.pushed {
        @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
    }
    @media #{$xsmall-and-up} {
        .header-title {
            &.pushed {
                @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
            }
        }
        .header-right-picture {
            &.pushed {
                @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
            }
        }
    }
}
/// Mixin helper to push header from extra large sidebar size
@mixin header-pushed-xlg {
    &.pushed {
        @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
    }
    @media #{$xlarge-and-up} {
        .header-title {
            &.pushed {
                @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, xlg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
            }
        }
        .header-right-picture {
            &.pushed {
                @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
            }
        }
    }
}
